import { Col, Row } from 'antd';
import { useRequest } from '@umijs/max';
import { ChartCard } from './Charts';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: {
    marginBottom: 24,
  },
};
const IntroduceRow = ({ data, loading }: any) => {

  return (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          title="分镜数"
          loading={loading}
          total={data?.total_shots}
          contentHeight={46}
        >
        </ChartCard>
      </Col>

      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          loading={loading}
          title="总时长"
          total={data?.total_duration}
          contentHeight={46}
        >
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          loading={loading}
          title="关键帧"
          total={data?.total_keyframes}
          contentHeight={46}
        >
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          loading={loading}
          bordered={false}
          title="对白"
          total={data?.total_dialogues}
          contentHeight={46}
        >
        </ChartCard>
      </Col>
    </Row>
  );
};
export default IntroduceRow;
